<template>
  <div class="app-container file-list">
    <div class="header-form card-filter-box">
      <el-form :inline="true" :model="queryForm" class="query-form" @submit.native.prevent>
        <div class="screening-form" style="display: flex;">
          <el-form-item>
            <el-input v-model.trim="queryForm.title" size="small" placeholder="请输入内容" class="width274" @keyup.enter.native="queryClick">
              <i slot="prefix" class="el-input__icon el-icon-search" style="font-size: 16px" />
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-select v-model="queryForm.time" placeholder="请选择排序" size="small" class="file-time" popper-class="global-select-down" @change="queryClick">
              <i slot="prefix" class="el-input__icon el-icon-date" style="font-size: 16px" />
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </div>
        <div class="query-button" style="margin-bottom: 22px;display:flex;">
          <el-button class="search-btn-style" plain type="primary" size="small" @click="queryClick">查询</el-button>
          <el-button class="clear-btn-style" type="text" size="small" style="margin-left: 16px;" @click="empty">
            清空
            <img :src="clearIcon" class="clear-icon" alt="clear">
          </el-button>
        </div>
      </el-form>
    </div>
    <div class="table-list">
      <el-row>
        <div style="display: flex;align-items: center;">
          <!-- <div class="list-title">
            文件列表 <span class="total">(共{{ list.fileAmount || 0 }}份文件)</span>
          </div> -->
          <div style="margin-right: 24px;">
            <Title :title="title" :is-show="true" :total="list.fileAmount" style="margin: 24px 0;">
              <!-- <span style="line-height: 16px;" class="total-amount">收入金额：{{ (list.totalAmount / 100) | moneyFilter }}</span> -->
            </Title>
          </div>
          <import-button v-if="isBrandAdmin() || hasRouteAuth('brand:fileList:import')" :import-api="importApi" :get-list="fetchData" class="btn-right-item"/>
        </div>
        <el-col v-loading="listLoading" v-if="hasRouteAuth(['brand:fileList'])" :class="{ 'data-empty': list.total < 1}" class="data-wrap">
          <p v-if="list.total < 1" style="text-align: center">暂无数据</p>
          <el-timeline v-else class="time-wrap">
            <el-timeline-item v-for="(item, itemIndex) in list.items" :key="item.time" :timestamp="item.time" placement="top" type="primary">
              <el-card shadow="never">
                <el-button
                  v-for="(file, fileIndex) in item.files"
                  :key="file.id"
                  type="text"
                  size="small"
                  class="file-button"
                  @click="toFileData(file)">
                  <div class="file-box">
                    <p v-if="isBrandAdmin() || hasRouteAuth('brand:fileList:edit')" class="del-btn" @click.stop="showDeldialog(file, itemIndex, fileIndex)">
                      <img src="../../../assets/excel-del.png" alt="删除">
                    </p>
                    <img src="../../../assets/icon-excel-blue.png" class="icon-style" alt="表格">
                    <p class="file-name">{{ file.fileName }}</p>
                  </div>
                </el-button>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-col>
      </el-row>
      <el-row v-if="hasRouteAuth(['brand:fileList'])" type="flex" justify="end" class="pagination-area">
        <el-pagination
          v-show="list.total > 0"
          :current-page.sync="list.page"
          :page-size="list.perPage"
          :total="list.total"
          layout="total, prev, pager, next, jumper"
          @current-change="handleCurrentChange" />
      </el-row>
    </div>
  </div>
</template>

<script>
import { hasRouteAuth } from '@/utils/permission';
import GetList from '@/mixins/getList';
import ImportButton from '@/components/ImportButton';
import Title from '@/components/Title';
import { standardFormat } from '@/filters/date';
import { getFileList, deleteFile } from '@/api/brand';
import { isBrandAdmin } from '@/utils/permission';
import clearIcon from '@/assets/medium/clear.png';

export default {
  filters: {
    standardFormat
  },
  components: {
    ImportButton,
    Title
  },
  mixins: [GetList],
  data() {
    return {
      clearIcon,
      title: '文件列表',
      queryForm: {
        title: '',
        time: 0
      },
      queryData: {
        title: '',
        time: 0
      },
      importApi: '/admin/brand/file/import',
      options: [{
        value: 0,
        label: '天'
      }, {
        value: 1,
        label: '周'
      }, {
        value: 2,
        label: '月'
      }]
    };
  },
  created() {
    this.list.perPage = 20;
    this.fetchData();
  },
  methods: {
    isBrandAdmin,
    getList: getFileList,
    hasRouteAuth,
    queryClick() {
      const queryForm = this.queryForm;
      if (!queryForm.title && queryForm.time === '') {
        this.$message.warning('搜索信息不能为空！');
      } else {
        const queryData = {
          title: queryForm.title,
          time: queryForm.time
        };
        this.queryData = queryData;
        this.fetchData();
      }
    },
    empty() {
      this.queryForm = {
        title: '',
        time: 0
      };
      this.queryData = this.queryForm;
      this.fetchData();
    },
    showDeldialog(file, itemIndex, fileIndex) {
      this.$confirm('是否确定删除该文件', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        center: true,
        type: 'warning',
        customClass: 'del-message del-message-cancel',
        iconClass: 'del-icon'
      }).then(() => {
        this.toDelFile(file, itemIndex, fileIndex);
      });
    },
    toDelFile(file, itemIndex, fileIndex) {
      this.listLoading = true;
      deleteFile(file.id).then(() => {
        this.listLoading = false;
        this.list.items[itemIndex].files.splice(fileIndex, 1);
        if (this.list.items[itemIndex].files.length === 0) {
          this.list.total--;
          this.list.items.splice(itemIndex, 1);
        }
      }, result => {
        this.listLoading = false;
      }).catch(e => {
        console.error(e);
      });
    },
    toFileData(file) {
      this.$router.push({
        name: 'fileData',
        params: { fileId: file.id },
        query: { name: encodeURIComponent(file.fileName) }
      });
    },
    handleCurrentChange(toPage) {
      this.fetchData(toPage);
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .file-list {
    .header-form {
      .query-form {
        display: flex;
        align-items: center;
        .el-form-item {
          margin-right: 16px;
        }
      }
      // & ::v-deep {
      //   .width274 .el-input__inner {
      //     width: 274px !important;
      //   }
      // }
    }
    .file-time {
      .el-input__inner {
        height: 30px;
      }
    }
    .table-list {
      margin: 0px 20px 20px 20px;
      // border:1px solid #eee;
      box-shadow:2px 4px 13px 0px rgba(221,225,234,1);
      border-radius:12px;
      background-color: #fff;
      padding: 0px 24px 24px 24px;
      .list-title {
        padding: 32px 0;
        padding-top: 28px;
      }
      .el-row {
        padding: 0;
        .data-empty {
          min-height: 100px;
          margin-bottom: 20px;
        }
        .data-wrap {
          padding: 0 10px;
          background: white;
          border-radius: 10px;
        }
        .time-wrap {
          padding-inline-start: 0px;
          .el-card {
            border: none;
            .file-button {
              margin-bottom: 24px;
              &:hover {
                background:rgba(255,255,255,1);
                box-shadow:1px 1px 8px 0px rgba(221,225,234,1);
                border-radius:8px;
                .del-btn {
                  display: inline-block;
                }
              }
            }
            .file-box {
              position: relative;
              width: 153px;
              max-height: 200px;
              min-height: 160px;
              display: flex;
              align-items: center;
              justify-items: center;
              flex-direction: column;
            }
            .del-btn {
              position: absolute;
              right: 9px;
              top: -13px;
              display: none;
            }
            .file-name {
              margin-block-start: 0.5em;
              margin-block-end: 0;
              width: 120px;
              font-size:14px;
              font-weight:400;
              color:rgba(102,102,102,1);
              line-height:20px;
              word-wrap: break-word;
              white-space: normal;
              line-height: 20px;
            }
            .icon-style {
              width: 70px;
            }
          }
        }
      }
    }
    .el-row {
      &:nth-of-type(2) {
        margin: 0;
      }
      &:last-child {
        margin-bottom: 0;
        padding: 0;
      }
      .el-col-8.btn-right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 8px 10px 8px 0px;
        line-height: 30px;
      }
    }
  }
  .resource-eidt-tooltip {
    padding: 5px 10px;
  }

</style>
